<template>
  <div class="header">
        <div class="headerTop">
            <div class="fl header_left">
                <img src="../../../static/images/header_logo.png" />
                <p>欢迎您：<span class="companyName">{{companyName}}</span>&nbsp;&nbsp;&nbsp;<span class="comAccount">{{comAccount}}</span></p>
                </div>

                <div class="fr header_right">
                <!-- <a class="stepABtn" @click="stepShow"><img src="../../../static/images/step_icon.png">操作流程</a> -->
                <!-- <router-link to='index'
                            class="indexBtn"></router-link> -->
                <div class="userBox">
                    <div class="user">
                    <img :src="imgUrL" />
                    <span>企业管理员</span>
                    </div>
                    <ul class="user_list">
                        <li>
                        <router-link to='personset'><i class="el-icon-user"></i> 个人设置</router-link>
                    </li>
                    <li>
                        <router-link to='changepsd'><i class="el-icon-unlock"></i> 修改密码</router-link>
                    </li>
                    <li><a @click="exitFlag=true"><i class="el-icon-switch-button"></i> 安全退出</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nav">
            <ul class="clearfix">
                <li v-for="(item , index) in menus" :key="index" :class="$route.query.navIndex == index|| (!$route.query.navIndex&&index===0)?'active' : '' ">
                    <div>
                       <span v-if="item.children">{{item.menuName.split('(')[0]}}</span>
                       <router-link :to="{
                           path:item.menuUrl,
                           query:{
                               navIndex:index
                           }
                        }" v-else>{{item.menuName.split('(')[0]}}</router-link>
                    </div>
                    <dl v-if="item.children">
                        <dt v-for="(itemChild,i) in item.children" :key="i">
                            <router-link :to="{
                                path:itemChild.menuUrl,
                                query:{
                                    navIndex:index
                                }
                            }">{{itemChild.menuName.split('(')[0]}}</router-link>
                        </dt>
                    </dl>
                </li>
            </ul>
        </div>
    <el-dialog title="系统提示"
               :visible.sync="exitFlag"
               width="30%"
               :append-to-body="true">
      <span class="exitTcNote"><img src='../../../static/images/warn_icon.png' />确认要退出吗？</span>
      <span slot="footer"
            class="dialog-footer">
        <input @click="exit"
               type="button"
               value="确 认"
               class="tcSubmit" />
        <input @click="exitFlag = false"
               type="button"
               value="取 消"
               class="tcCancel" />
      </span>
    </el-dialog>
    <!-- <el-dialog
				   title="操作流程"
				   :visible.sync="$store.state.showflag1"
           :append-to-body="true"
				   width="600px" class="stepDialog"
				  >
	    <div class="step">
            <div class="stepImg">
              <img src="../../../static/images/step.png">
            </div>
			<div class="stepBottom"> 
              <img src="../../../static/images/stepNote_icon.png">
              首次登录操作需按以上流程操作！
              <a class="noteBtn" @click="notShow">不再提示</a>
            </div>
		</div>
    </el-dialog> -->
  </div>
</template>

<script>
import config from "../../config.js";
import { mapState } from 'vuex'
export default {
  name: '',
  data () {
    return {
      exitFlag: false,
      companyName: '',
      comAccount: '',
      menus:[],
      showflag1:false,
      active:0
    }
  },
  mounted () {
    if (localStorage.userid) { 
        this.getInfo()
        if(JSON.parse(localStorage.user).userType == 2){
            this.$router.push('waitAssess')
        }
     }else{
         this.$message.warning('请登录后查看')
         this.$router.push('login')
     }
  },
  computed: {
    ...mapState([
      'imgUrL'
    ])
  },
  created() {
    this.getMenu();
  },
  methods: {
    cutTabClick(index){
        // console.log(index);
        this.active = index
    },
    stepShow(){
      this.$store.state.showflag1 = true
    },
    getMenu () {
      this.$axios.post(config.baseUrl + 'emergency/v1.0/menu/list', { 
          companyId:JSON.parse(localStorage.user).companyId,
          menuType:'1'
          }).then((res) => {
          // console.log(res)
          if (res.data.meta.success) {
            this.menus = res.data.data
          } else {
           
          }

        }).catch((response) => {
        })
    },
    getInfo () {
      this.$axios.post(config.baseUrl + 'emergency/v1.0/personal/info', { userId: localStorage.userid })
        .then((res) => {
          // console.log(res)
          if (res.data.meta.success) {
            this.companyName = res.data.data.companyName;
            this.$store.state.loginstates = res.data.data.userType;
            this.comAccount = res.data.data.userAccount;
          } else {
            if(res.data.meta.message == 'repeat login'){
                this.$message.warning('检测到账号重复登录，如非本人操作，为了账号安全，请您尽快修改密码！')
                this.$router.push('login')
            }else if(res.data.meta.message == '服务异常，未获取到token的值'){
                this.$message.warning('服务异常，请重新登录！')
                this.$router.push('login')
            }
          }

        }).catch((response) => {
        })
    },
    exit () {
      this.$axios.post(config.baseUrl + "emergency/v1.0/user/logout", { userId: localStorage.userid })
        .then(res => {
          if (res.data.meta.success) {
            this.exitFlag = false
            for(var i in localStorage){
              console.log(localStorage[i])
              if(localStorage[i]!='psdFlag' || localStorage[i] != 'showFlag'){
                  localStorage.removeItem(localStorage[i])
              }
            }
            this.$router.push("login")
          } else {
            this.$message.warning(res.data.meta.message)
          }
        })
        .catch(response => {
          console.log(response);
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
.header {
  height: 100px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
  min-width: 1200px;
  .headerTop{
    height: 58px;
    padding: 0 30px;
    background: url("../../../static/images/header_bg.png") no-repeat center
    center;
    .header_left {
        line-height: 58px;
        height: 58px;
        p {
        display: inline;
        color: #fff;
        margin-left: 25px;
        font-size: 12px;
        }
    }
    .header_right {
        .stepABtn{
        color: #fff;
        margin-right: 20px;
        float: left;
        line-height: 58px;
        cursor: pointer;
        img{
            margin-right: 5px;
            position: relative;
            top: -1px;
        }
        }
        .stepABtn:hover{
        opacity: .8;
        }
        .indexBtn {
        background: url("../../../static/images/indexBtn.png") no-repeat;
        display: inline-block;
        height: 31px;
        width: 81px;
        border: 1px solid rgba(64, 128, 255, 0.6);
        border-radius: 8px;
        margin-top: 14px;
        margin-right: 20px;
        }
        .indexBtn:hover {
        border-color: #fff;
        }
        .userBox {
        float: right;
        position: relative;
        .user {
            line-height: 58px;
            padding: 0 15px;
            cursor: pointer;
            > img {
            height: 35px;
            width: 35px;
            border-radius: 50%;
            position: relative;
            top: -1px;
            }
            > span {
            color: #fff;
            margin-left: 15px;
            padding-right: 30px;
            background: url("../../../static/images/user_down.png") no-repeat
                right 10px center;
            display: inline-block;
            width: 100px;
            text-align: center;
            }
        }
        .user_list {
            width: 100%;
            border-radius: 0 0 8px 8px;
            background: #fff;
            display: none;
            position: absolute;
            z-index: 2;
            box-shadow: 1px 1px 10px rgba(207, 219, 241, 1);
            li {
            cursor: pointer;
            a {
                display: block;
                height: 48px;
                line-height: 48px;
                padding-left: 52px;
                color: #4080ff;
            }
            }
            li:last-child {
            border-radius: 0 0 8px 8px;
            }
            li:hover {
            background: #ecf2ff;
            }
        }
        }
        .userBox:hover {
        .user_list {
            display: block;
        }
        }
    }
  }
  .nav{
      height: 42px;
      background: #fff;
      padding: 0 30px;
      box-shadow: 1px 1px 10px #cfdbf1;
      ul{
          >li{
              float: left;
              margin: 0 20px;
              position: relative;
              a,span{
                  display: block;
              }
              >div{
                line-height: 39px;
                cursor: pointer;
                border-bottom: 3px solid #fff;
                >a,>span{
                    padding:0 10px;
                }
              }
              &.active > div{
                  border-bottom-color: #2b84ff;
                  font-weight: bold;
              }
              &:hover > div{
                  font-weight: bold;
              }
              &:hover dl{
                  display: block;
              }
              dl{
                  display: none;
                  background: #fff;
                  margin: 0;
                  box-shadow: 1px 1px 10px #cfdbf1;
                  dt{
                      line-height: 32px;
                      text-align: center;
                  }
                  dt:hover{
                      background: #e8f0ff;
                      color: #4080ff;
                  }
              }
          }
      }
  }
}
</style>
<style lang='less' scoped>
  .exitTcNote {
    font-weight: bold;
    text-align: center;
    padding: 30px 0 20px;
    display: block;
    img {
      margin-right: 15px;
    }
  }
  .tcSubmit {
    height: 36px;
    width: 85px;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #4080ff;
    background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
  }
  .tcCancel {
    height: 36px;
    width: 85px;
    border: 1px solid #5ea0ff;
    color: #4080ff;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    margin-left: 5px;
  }
  .tcSubmit:hover,
  .tcCancel:hover {
    opacity: 0.8;
  }

</style>
<style lang='less'>
.stepDialog{
    .el-dialog__body{
      padding: 0;
    }
    .step{
      .stepImg{
        text-align: center;
        padding: 35px 0 45px;
      }
      .stepBottom{
        background: #f9f9f9;
        height: 70px;
        border-radius: 0 0 8px 8px;
        line-height: 70px;
        text-align: center;
        img{
          margin-right: 5px;
          position: relative;
          top: -1px;
        }
        a.noteBtn{
          cursor: pointer;
          color: #7254e6;
          display: inline-block;
          height: 36px;
          line-height: 36px;
          width: 96px;
          text-align: center;
          border: 1px solid #3f80fe;
          border-radius: 8px;
          margin-left: 15px;
        }
        a.noteBtn:hover{
          opacity: .8;
        }
      }
    }
  }
</style>

